<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!--bootstrap-select  css文件-->
    <link rel="stylesheet" type="text/css" href="js/bootstrapselect/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="js/bootstrapselect/css/bootstrap-select.css"/>
    <!--日期  css文件-->
    <link rel="stylesheet" type="text/css" href="js/datepicker/css/bootstrap-datepicker.css">
    <!--弹窗 css文件-->
    <link rel="stylesheet" type="text/css" href="js/layer/layer.css">
    <!--主要css样式-->
    <link rel="stylesheet" type="text/css" href="css/models.css">
</head>
<body>
<div class="MainContent">
    <!--主体内容-->
    <div class="MainCont">
        <div class="ph_snbBtn">
            <button class="columnBtn" name="" value="刷新">刷新</button>
            <button class="columnBtn js_addLabour" name="" value="添加用户">添加用户</button>
            <!--<button class="columnBtn js_editLabour" name="" value="编辑">编辑</button>
            <button class="columnBtn" name="" value="启用">启用</button>
            <button class="columnBtn" name="" value="禁用">禁用</button>
            <button class="columnBtn js_allot" name="" value="分配角色">分配角色</button>
            <button class="columnBtn" name="" value="重置密码">重置密码</button>-->
        </div>
        <!--筛选条件-->
        <div class="ph_screen">
            <table class="ph_tableBox">
                <tr>
                    <th>账号状态：</th>
                    <td>
                        <select class="selectpicker">
                            <option value="">全部</option>
                            <option value="">冻结</option>
                            <option value="">正常</option>
                        </select>
                    </td>
                    <th>用户账号：</th>
                    <td><input name="" type="text"></td>
                    <td colspan="4">
                        <input name="" type="button" value="搜索"><input name="" type="button" value="重置">
                    </td>
                </tr>
            </table>
        </div>
        <!--end 筛选条件-->
        <!--列表-->
        <div class="ph_wareBox ph_tabScroll">
            <table class="ph_wareList" id="example"></table>
        </div>
        <!--end 列表-->
    </div>
    <!--end 主体内容-->
</div>
<!--添加编辑用户弹窗-->
<div class="PopupBox" id="ph_userBox">
    <!--内容-->
    <div class="ph_subPoCon">
        <form id="formID">
            <ul class="addList">
                <li><label for=""><span class="require">*</span>用户名称：</label><input class="memberTxt validate[required]" name="" type="text" placeholder="请输入用户名称"></li>
                <li><label for=""><span class="require">*</span>用户账号：</label><input class="memberTxt validate[required,custom[phone]]" name="" type="text" placeholder="请输入用户手机号"></li>
            </ul>
        </form>
    </div>
    <!--end 内容-->
</div>
<!--end 添加编辑用户弹窗-->
<!--分配角色弹窗-->
<div class="PopupBox" id="ph_allotBox">
    <!--内容-->
    <div class="PopupCon">
        <div class="ph_wareBox">
            <table class="ph_wareList">
                <thead>
                    <tr>
                        <th width="50"><input class="check-all" name="" type="checkbox"></th>
                        <th>角色名称</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input class="ids" name="" type="checkbox"></td>
                        <td title="--">--</td>
                        <td title="--">--</td>
                    </tr>
                    <tr>
                        <td><input class="ids" name="" type="checkbox"></td>
                        <td title="--">--</td>
                        <td title="--">--</td>
                    </tr>
                    <tr>
                        <td><input class="ids" name="" type="checkbox"></td>
                        <td title="--">--</td>
                        <td title="--">--</td>
                    </tr>
                    <tr>
                        <td><input class="ids" name="" type="checkbox"></td>
                        <td title="--">--</td>
                        <td title="--">--</td>
                    </tr>
                    <tr>
                        <td><input class="ids" name="" type="checkbox"></td>
                        <td title="--">--</td>
                        <td title="--">--</td>
                    </tr>
                    <tr>
                        <td><input class="ids" name="" type="checkbox"></td>
                        <td title="--">--</td>
                        <td title="--">--</td>
                    </tr>
                    <tr>
                        <td><input class="ids" name="" type="checkbox"></td>
                        <td title="--">--</td>
                        <td title="--">--</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--end 内容-->
</div>
<!--end 分配角色弹窗-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--bootstrap-select-->
<script type="text/javascript" src="js/bootstrapselect/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapselect/bootstrap-select.js"></script>
<script type="text/javascript" src="js/bootstrapselect/select.js"></script>
<!--日期控件-->
<script type="text/javascript" src="js/datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/datepicker/jquery.timepicker.js"></script>
<script type="text/javascript" src="js/datepicker/jquery.datepair.js"></script>
<script type="text/javascript" src="js/datepicker/datepicker.js"></script>
<!--验证-->
<script type="text/javascript" src="js/validat/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="js/validat/jquery.validationEngine.js"></script>
<!--分页-->
<script type="text/javascript" src="js/pages/jquery.dataTables.min.js"></script>
<!--弹窗-->
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript">
    $(function() {
        $("#formID").validationEngine({
            addPromptClass: 'formError-text',
            showArrow: false,
            promptPosition: 'bottomLeft:10 0'
        });
        //添加用户
        $('.ph_snbBtn').on('click','.js_addLabour',function(){
            layer.open({
                type: 1,
                title: '添加用户',
                closeBtn : 1,
                area: ['460px','265px'],
                //maxmin: true,
                btn:['保存','取消'],
                btnAlign: 'c',
                content: $('#ph_userBox')
            });
        });
        //编辑用户
        $('.ph_wareBox').on('click','.js_addLabour',function(){
            layer.open({
                type: 1,
                title: '添加用户',
                closeBtn : 1,
                area: ['460px','265px'],
                //maxmin: true,
                btn:['保存','取消'],
                btnAlign: 'c',
                content: $('#ph_userBox')
            });
        });
        //分配角色
        $('.ph_wareBox').on('click','.js_allot',function(){
            layer.open({
                type: 1,
                title: '分配角色',
                closeBtn : 1,
                area: ['500px','440px'],
                btn:['保存', '取消'],
                btnAlign: 'c',
                content: $('#ph_allotBox')
            });
        });
        //删除
        $('.ph_wareList').on('click','.Js_delete',function(){
            layer.confirm('确定此操作吗？',{
                title: '删除',
                icon: 3,
                btnAlign: 'c',
                closeBtn : 0
            },function(index){
                layer.alert('操作成功', {icon: 1,btnAlign: 'c', closeBtn : 0});
                //layer.close(index);
            });
        });
        $('#example').DataTable({
             "bServerSide": true,
             "sPaginationType": "full_numbers",
             //"bJQueryUI": true,
             "sDom": '<"">t<"F"ip>',
            "autoWidth": false,  //自适应宽度
             //"sAjaxSource": "${ctx}/api/user/list", //ajax调用接口
             //<div class="btn-group" style="text-align:left;"><button type="button" class="btn btn-info dropdown-toggle"data-toggle="dropdown">操作 <span class="caret"></span></button>
             "sAjaxSource": "data/arrays.txt", //ajax调用接口
             "aoColumnDefs": [{sDefaultContent: '', orderable: false , aTargets: [ '_all' ] }],
             "aoColumns": [
                 /*{ "sWidth": "40px","sTitle" : "<input class= \"check-all\" name=\"\" type=\"checkbox\">", "mData": "id","mRender": function(){
                     return '<input class="ids" name="" type="checkbox">';
                 }},*/
                 { "sWidth": "80px","sTitle" : "编号", "mData": "id"},
                 { "sTitle" : "用户名称","mData": "id" },
                 { "sTitle" : "用户账号","mData": "id2" },
                 { "sWidth": "100px","sTitle" : "账号状态","mData": "id8","mRender": function(){
                     return '<span class="gray">已冻结</span>';//gray 灰色
                     //return '<span>正常</span>';  默认颜色就不用加样式名
                 }
                 },
                 { "sWidth": "110px", "sTitle" : "操作","mData" : "id","sClass":"ph_tableShow", "mRender" : function ( data, type, full ) {
                     var text = '<div class="operateBox"><input class="operate" name="" type="button" value="操作选项">';
                     text += '<ul class="operateList hide" role="menu">';
                     text += '<li><a class="js_Frozen" href="javascript:void(0);">冻结</a></li>';
                     text += '<li><a class="Js_Enable" href="javascript:void(0);">解冻</a></li>';
                     text += '<li><a class="js_addLabour" href="javascript:void(0);">编辑</a></li>';
                     text += '<li><a class="Js_delete" href="javascript:void(0);">删除</a></li>';
                     text += '<li><a class="js_allot" href="javascript:void(0);">分配角色</a></li>';
                     text += '<li><a href="javascript:void(0);">重置密码</a></li>';
                     text += '</ul></div>';
                     return text;
                 }
                 }
             ],
            "oLanguage" : {
                "sProcessing" : "数据加载中······",
                "sLengthMenu" : "显示 _MENU_ 条记录",
                "sZeroRecords" : "没有您要搜索的内容！",
                "sEmptyTable" : "列表中无数据存在！",
                "sInfo" : "当前显示 _START_ 到 _END_ 条数据，共 _TOTAL_ 条数据",
                "sInfoEmpty" : "显示 0 到 0 条记录",
                "sInfoFiltered" : "数据列表中共  _MAX_ 条记录",
                "oPaginate" : {
                    "sFirst" : "首页",
                    "sPrevious" : "上一页",
                    "sNext" : "下一页",
                    "sLast" : "末页"
                }
            }
             /*"fnServerData" : function ( sSource, aoData, fnCallback, oSettings ) {
                oSettings.jqXHR = $.ajax( {
                    "dataType" 	: 'json',
                    "type" 		: "GET",
                    "async"     : 'false',
                    "url" 		: sSource,
                    "data" 		: {
                        'pageNum': (aoData[3].value/aoData[4].value)+1,
                        'pageSize' :  aoData[4].value,
                        'telphone'  :  $("#telphone").val(),
                        'isable' : $('#isable').val()
                    },
                    "success"	: fnCallback
                } );
            }*/
        });
        /*$("#titleId").attr('disabled',true);
        //console.log($('input[name="checkOne"]'));
        window.onload = function(){
            $('input[name="checkOne"]').attr('disabled',true);
        }*/
    });
</script>
</body>
</html>